<template>
	<el-dialog
	  title="预览"
	  :append-to-body="true"
	  :visible.sync="visible"
	  :before-close="close"
	  :close-on-click-modal="false"
	  width="16%"
	  height="16%"
    style="font-weight: bold;"
    >
    <div align="left">
    <el-button type="success" class="pan-btn success-btn" v-print="'#get'" size="mini">样品签打印</el-button>
    </div>
    <div id="get" class="get" >
      <div class="group" height="100%" style="font-weight: bold;">
        <div class="head-box" style="font-weight: bold;">
          <div align="center">记录编号:ZL·T/SOP·030</div>
          <div>倍特药业样品标签</div>
        </div>
        <div class="list" size="small" style="width: 100%;">
          <div class="list-l">
            名&nbsp;&nbsp;称:
          </div>
          <div class="list-r">
            <span v-html="checkList.productName ? checkList.productName : '&nbsp;'" />
          </div>
        </div>
        <div class="list" size="small" style="width: 100%;">
          <div class="list-l" >
            批&nbsp;&nbsp;号:
          </div>
          <div class="list-r">
            <span v-html="checkList.batchNum ? checkList.batchNum : '&nbsp;'" />
          </div>
        </div>
        <div class="list" size="small" style="width: 100%;">
          <div class="list-l">
            取样时间:
          </div>
          <div class="list-r">
            <span>
              {{ checkList.getDate | changeTime }}
            </span>
          </div>
        </div>
       <div class="list" size="small" style="width: 100%;" height="15%">
          <!-- <div class="list-l"> -->
            <div class="list-l">
            取 样 量:
          </div>
         <div class="list-r" height="15%">
           &nbsp;
           </div>
        </div>
       <div class="list" size="small" style="width: 100%;">
          <div class="list-l" >
            取样编号:
          </div>
         <div class="list-r">
           &nbsp;
           </div>
        </div>
        <div class="list" size="small" style="width: 100%;">
          <div class="list-l">
            取 样 人:
          </div>
          <div class="list-r">
            <span>
              {{ checkList.getUserName }}
            </span>
          </div>
        </div>
      </div>
    </div>
    </el-dialog>
</template>

<script>
  import { CODE_OK } from '@/common/js/config'
  import { isBlank,parseTime } from '@/common/js/utils'
  import Calc from 'calculatorjs'
	export default {
    data() {
      return {
        visible: false,
        checkList: {}
      }
    },
    props: ["childDataForm"],
    created() {
      if (!isBlank(this.childDataForm)) {
        this.checkList = this.childDataForm
        this.visible = true
      }
    },
    methods: {
      close() {
        this.visible = false
        this.$emit('close')
      }
    }
	}
</script>

<style type="text/scss" lang="scss" scoped>
  .get{
    color: black;
    font-family: SimSun;
    font-size: 12px;
    font-weight: 900;
    width: 260px;
    padding: 1px;
    line-height: 1.42857143;

    .group{
      padding-left: 1px;
      padding-right: 1px;
      width: 100%;
      height: 100%;
      font-weight: 900;
      .head-box{
        margin-top: 1px;
        text-align: center;
      }
      .list{
        width: 100%;
        font-weight: 900;
        .list-l{
          width: 25%;
          display: inline-block;
          vertical-align: top;
          font-weight: 900;
        }
        .list-r{
          // width: 72%;
          width: 72%;
          display: inline-block;
          border-bottom: 1px solid black;
          font-weight: 900;
        }
      }
      .full-blank{
        width: 100%;
      }
    }
  }
</style>
